/* eslint-disable vue/valid-v-for */
<template>
  <!-- 头部导航栏 -->
  <div>
    <b-navbar toggleable="lg" type="dark"   variant="dark" sticky>
      <b-navbar-brand href="#">Tankk</b-navbar-brand>

      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item href="#">首页</b-nav-item>
        </b-navbar-nav>

        <!-- 有下拉菜单nva -->
        <b-navbar-nav>
          <b-nav-item-dropdown v-for="val in sortMany" :key="val.id" :text="val.sortName" right>
            <b-dropdown-item v-for="kid in val.children" :key="kid.id" href="#">{{kid.sortName}}</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>

        <!-- 无下拉菜单nav -->
        <b-navbar-nav>
          <b-nav-item href="#" v-for="(val,index) in sortOnly" :key="index">
            {{val.sortName}}
          </b-nav-item>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-form>
            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-nav-form>

          <b-nav-item-dropdown right>
            <!-- Using 'button-content' slot -->
            <template v-slot:button-content>
              <em>用户</em>
            </template>
            <b-dropdown-item href="#">个人资料</b-dropdown-item>
            <b-dropdown-item href="#">退出登录</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
    <router-view></router-view>
    <!-- 返回顶部按钮 -->
    <div>
      <b-card title="↑" v-if="btnFlag"  @click="backTop" class="to-top">
      </b-card>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      // 返回顶部按钮
      scrollTop: 0,
      btnFlag: false,
      sorts: [
        {
          id: 101,
          sortName: '技术博客',
          children: [
            {
              id: 1011,
              sortName: 'HTML',
              pid: 101
            },
            {
              id: 1012,
              sortName: 'CSS',
              pid: 101
            },
            {
              id: 1013,
              sortName: 'JavaScript',
              pid: 101
            }
          ]
        },
        {
          id: 102,
          sortName: '个人日志',
          children: [
            {
              id: 1021,
              sortName: '感悟随笔',
              pid: 102
            },
            {
              id: 1022,
              sortName: '图书',
              pid: 102
            },
            {
              id: 1023,
              sortName: '影视作品',
              pid: 102
            }
          ]
        },
        {
          id: 103,
          sortName: '留言',
          children: ''
        },
        {
          id: 104,
          sortName: '相册',
          children: ''
        }
      ]
    }
  },
  created () {
  },
  // window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚 动事件
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      const that = this
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      const that = this
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      if (that.scrollTop > 800) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    }
  },
  computed: {
    // 菜单过滤 无下拉菜单项目
    sortOnly () {
      return this.sorts.filter(
        function (sorts) {
          return sorts.children.length === 0
        }
      )
    },
    // 菜单过滤 有下拉菜单项目
    sortMany () {
      return this.sorts.filter(
        function (sorts) {
          return sorts.children.length !== 0
        }
      )
    }
  }
}

</script>

<style lang="less" scoped>
.to-top {
  position:fixed;right:1rem;bottom:1rem;
  background:rgba(220,220,220,0.6);
  cursor:pointer;
}
</style>
